import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { List, Card, Row, Col, Radio, Input, Tag, Badge, Button, Icon, Dropdown, Menu, Avatar } from 'antd';
import { Link } from 'dva/router';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './BasicList.less';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Search } = Input;

@connect(state => ({
  user: state.user,
}))
export default class BasicList extends PureComponent {
    state = {
       status: '',
        keyword: '',
        pagination: {size: 10, page: 1, total: 0},
    }

  componentDidMount() {
    this.props.dispatch({
      type: 'user/check',
    });
    this.props.dispatch({
        type:'user/check_count'
    })
  }
    onSearch = (value) => {
        this.setState({
            keyword: value,
        });
        this.loadData(this.state.pagination.page, this.state.pagination.size, value, this.state.status);
    }

  onPageChange = (page, pageSize) => {
      console.log(page, pageSize);
      this.loadData(page, pageSize, this.state.keyword, this.state.status);
  }

    onRightClick = (id, key) => {
      console.log(id, key);
      switch (key) {
          case 'check':
              this.props.dispatch({
                  type: 'user/accredit',
                  payload: {id},
                  callback: (res) => {
                      if (res.status) {
                          this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);
                      }
                  },
              });
              break;
          case 'uncheck':
              this.props.dispatch({
                  type: 'user/back',
                  payload: {id},
                  callback: (res) => {
                      if (res.status) {
                          this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);
                      }
                  },
              });
              break;
          case 'delete':
              this.props.dispatch({
                  type: 'user/checkRemove',
                  payload: {id},
                  callback: (res) => {
                      if (res.status) {
                          this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);
                      }
                  },
              });
              break;
          default:
              break;
      }
    }
    loadData = (page, pageSize, keyword, status) => {
        this.props.dispatch({
            type: 'user/check',
            payload: {
                size: pageSize,
                page,
                status,
                keyword,
            },
        });
    }
  render() {
    const { user: { checks,checkInfo, loading } } = this.props;
    const pagination = checks.pagination;
    pagination.onChange = this.onPageChange;
    this.setState({
        pagination,
    });
    const Info = ({ title, value, bordered }) => (
      <div className={styles.headerInfo}>
        <span>{title}</span>
        <p>{value}</p>
        {bordered && <em />}
      </div>
    );

    const extraContent = (
      <div className={styles.extraContent}>
        <RadioGroup
          onChange={(e) => {
              console.log(e);
              this.setState({
                  status: e.target.value,
              });
              this.props.dispatch({
                  type: 'user/check',
                  payload: {
                      size: this.state.pagination.size,
                      page: this.state.pagination.page,
                      status: e.target.value,
                  },
              });
        }}
          defaultValue={this.state.status}
        >
          <RadioButton value="">全部</RadioButton>
          <RadioButton value={0}>等待审核</RadioButton>
          <RadioButton value={1}>通过审核</RadioButton>
          <RadioButton value={2}>被驳回</RadioButton>
        </RadioGroup>
        <Search
          defaultValue={this.state.keyword}
          className={styles.extraContentSearch}
          placeholder="请输入"
          onSearch={(value) => {
             this.onSearch(value);
          }}
        />
      </div>
    );

    const ListContent = ({ data }) => (
      <div className={styles.listContent}>
        <div>
          <span>申请编号</span>
          <p>{data.check_no}</p>
        </div>
        <div style={{width: 80}}>
          <span>申请人</span>
          <p>{data.info.true_name}</p>
        </div>
        <div style={{width: 100}}>
          <span>工种</span>
          <p><Tag color="cyan">{data.service.name}</Tag></p>
        </div>
        <div style={{width: 120}}>
          <span>地址</span>
          <p>{data.info.address}</p>
        </div>
        <div style={{width: 80}}>
          <span>状态</span>
          <p> <Badge status={data.status_class} />{data.status_label}</p>
        </div>
        <div style={{marginTop: 12, width: 135}}>
          <span>申请时间</span>
          <p>{data.created_at}</p>
        </div>
        <div style={{marginTop: 12, width: 135}}>
          <span>审核时间</span>
          <p>{data.checked_at}</p>
        </div>
        <div />
      </div>
    );

    const menu = data => (
      <Menu onClick={({ key }) => {
          this.onRightClick(data.data.id, key);
      }}
      >
        <Menu.Item disabled={data.data.status > 0} key="check">
         审核
        </Menu.Item>
        <Menu.Item disabled={data.data.status > 0} key="uncheck">
         驳回
        </Menu.Item>
        <Menu.Item disabled={data.data.status > 0} key="delete">
          删除
        </Menu.Item>
      </Menu>
    );

    const MoreBtn = data => (
      <Dropdown overlay={menu(data)}>
        <a>
          更多操作 <Icon type="down" />
        </a>
      </Dropdown>
    );

    return (
      <PageHeaderLayout>
        <div className={styles.standardList}>
          <Card bordered={false}>
            <Row>
              <Col sm={8} xs={0}>
                <Info title="我的待办" value={checkInfo.ing} bordered />
              </Col>
              <Col sm={8} xs={0}>
                <Info title="已处理" value={checkInfo.checked} bordered />
              </Col>
              <Col sm={8} xs={0}>
                <Info title="已驳回" value={checkInfo.uncheck} />
              </Col>
            </Row>
          </Card>

          <Card
            className={styles.listCard}
            bordered={false}
            title="认证列表"
            style={{ marginTop: 24 }}
            bodyStyle={{ padding: '0 32px 40px 32px' }}
            extra={extraContent}
          >
            <List
              size="large"
              rowKey="id"
              loading={loading}
              pagination={pagination}
              dataSource={checks.list}
              renderItem={item => (
                <List.Item
                  actions={[<Link to={`/manager/check/${item.id}`}>查看详情</Link>, <MoreBtn data={item} />]}
                >
                  <List.Item.Meta
                    avatar={<Avatar src={item.avatar} shape="square" size="large" />}
                    title={<a href={item.href}>{item.order_no}</a>}
                    description={item.subDescription}
                  />
                  <ListContent style={{justifyContent: 'flex-start'}} data={item} />
                </List.Item>
              )}
            />
          </Card>
        </div>
      </PageHeaderLayout>
    );
  }
}
